/**
 * 这是一个针对 biejiujie 前端框架 的CSS书写案例
 * 包含数值的部分 均为变量 也就是可以修改为任何数值
 * 颜色部分也是数值 只不过为 16进制的字符串变量
 */

/******************** 通用部分 ********************/
*{ margin: 0px; padding: 0px; color: #ccc;}
ul{ list-style: none;}
html{ font-size: 14px;}
a{ text-decoration: none;}



/******************** 宽高部分 ********************/

/* 固定的 - 宽 */
.w-px-20{ width: 20px;}
.w-px-30{ width: 30px;}
.w-px-40{ width: 40px;}
.w-px-50{ width: 50px;}
.w-px-100{ width: 100px;}
.w-px-200{ width: 200px;}
.w-px-500{ width: 500px;}
/* 固定的 - 高 */
.h-px-20{ height: 20px;}
.h-px-30{ height: 30px;}
.h-px-40{ height: 40px;}
.h-px-50{ height: 50px;}
.h-px-100{ height: 100px;}
.h-px-200{ height: 200px;}
.h-px-500{ height: 500px;}

/* 百分比 - 宽  */
.w-rh-20{ width: 20%;}
.w-rh-40{ width: 20%;}
.w-rh-50{ width: 20%;}
.w-rh-100{ width: 100%;}
/* 百分比 - 高  */
.h-rh-20{ height: 20%;}
.h-rh-40{ height: 20%;}
.h-rh-50{ height: 20%;}
.h-rh-100{ height: 100%;}

/* 相对视口((1/100)) - 宽 */
.w-vw-20{ width: 20vw;}
.w-vw-40{ width: 40vw;}
.w-vw-50{ width: 50vw;}
.w-vw-100{ width: 100vw;}
/* 相对视口(1/100) - 高 */
.h-vw-20{ height: 20vw;}
.h-vw-40{ height: 40vw;}
.h-vw-50{ height: 50vw;}
.h-vw-100{ height: 100vw;}

/* 根字号 - 宽 */
.w-rem-0_1{ width: 0.1rem;}
.w-rem-0_2{ width: 0.2rem;}
.w-rem-1{ width: 1rem;}
.w-rem-2{ width: 2rem;}
/* 根字号 - 高 */
.h-rem-0_1{ height: 0.1rem;}
.h-rem-0_2{ height: 0.2rem;}
.h-rem-1{ height: 1rem;}
.h-rem-2{ height: 2rem;}


/* 宽高相对 - 最小视口 - 宽 */
.w-vmin-1{ width: 1vmin;}
.w-vmin-2{ width: 2vmin;}
/* 宽高相对 - 最小视口 - 高 */
.h-vmin-1{ height: 1vmin;}
.h-vmin-2{ height: 2vmin;}


/* 宽高相对 - 最小视口 - 宽 */
.w-vmax-1{ width: 1vmax;}
.w-vmax-2{ width: 2vmax;}
/* 宽高相对 - 最小视口 - 宽 */
.h-vmax-1{ height: 1vmax;}
.h-vmax-2{ height: 2vmax;}

/******************** 行高部分 ********************/


/******************** 内容部分 ********************/
/* 内容颜色 */
.c-000{ color: #000;}
.c-222{ color: #222;}
.c-444{ color: #444;}
.c-666{ color: #666;}
.c-888{ color: #888;}
.c-aaa{ color: #aaa;}
.c-ccc{ color: #ccc;}
.c-eee{ color: #eee;}
.c-fff{ color: #fff;}

/* 文本部分 */
.t-a-c{ text-align: center;}
.t-a-l{ text-align: left;}
.t-a-r{ text-align: right;}

/******************** 浮动部分 ********************/
.f-l{float: left;}
.f-r{float: right;}
.f-n{float: none;}


/******************** 背景部分 ********************/
/* 背景颜色 */
.b-c-000{ background-color: #000;}
.b-c-222{ background-color: #222;}
.b-c-444{ background-color: #444;}
.b-c-666{ background-color: #666;}
.b-c-888{ background-color: #888;}
.b-c-aaa{ background-color: #aaa;}
.b-c-ccc{ background-color: #ccc;}
.b-c-eee{ background-color: #eee;}
.b-c-fff{ background-color: #fff;}


/******************** 间距部分 ********************/
/* 内间距 */
.p-px-10{ padding: 10px;}
.p-px-10-l{ padding-left: 10px;}
.p-px-10-r{ padding-right: 10px;}
.p-px-10-t{ padding-top: 10px;}
.p-px-10-b{ padding-bottom: 10px;}

/* 外间距 */
.m-px-10{ margin: 10px;}
.m-px-10-l{ margin-left: 10px;}
.m-px-10-r{ margin-right: 10px;}
.m-px-10-t{ margin-top: 10px;}
.m-px-10-b{ margin-bottom: 10px;}

/******************** 定位部分 ********************/

/******************** 列表部分 ********************/
/*针对ul li做的处理 */
.u-f-l li{ float: left; }
.u-p-20 li{ padding: 20px; }
.u-p-20-l li{ padding-left: 20px; }
.u-p-20-r li{ padding-right: 20px; }